<template>
  <div>
    <div class="header">
      <div class="left">
        <van-tabs v-model:active="active" @click-tab="onClickTab">
          <van-tab v-for="index in aa" :title="index.name"> </van-tab>
        </van-tabs>
      </div>

      <div class="right">
        <p @click="dian">
          <van-icon name="search" />
        </p>
      </div>
    </div>

    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in list" :key="item">
            <div class="vadio" @click="huan(item)">
              <div class="vadio-a">
                <div class="vadio-a-a">
                  <img src="../../assets/vue.svg" alt="" />
                  <p>{{ item.name }}</p>
                </div>
                <div class="vadio-a-a">
                  <p>
                    {{ item.user_guanzhu }}
                  </p>
                  <van-icon name="search" />
                </div>
              </div>
              <div class="vadio-b">
                {{ item.content }}
              </div>
              <div class="vadio-c">
                <!-- <img src="../../assets/1000.webp" alt="" /> -->
                <VideoPlayer :videoSrc="qq" />
              </div>
              <div class="vadio_d">
                <div>
                  <van-icon name="share-o" />
                  <p>分享</p>
                </div>
                <div>
                  <van-icon name="star-o" />
                  <p>收藏</p>
                </div>
                <div>
                  <van-icon name="chat-o" />
                  <p>{{ item.pinglun }}</p>
                </div>
                <div>
                  <van-icon name="good-job-o" />
                  <p>{{ item.dianzan }}</p>
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import VideoPlayer from "./video_list.vue";
import qq from "../../assets/1.mp4";
import axios from "axios";
const router = useRouter();
let active = ref(0);
let lengtha = ref(0);
let aa = ref([
  {
    name: "关注",
    id: 1,
  },
  {
    name: "推荐",
    id: 2,
  },
  {
    name: "农业",
    id: 3,
  },
  {
    name: "热门",
    id: 4,
  },
  {
    name: "影视",
    id: 5,
  },
  {
    name: "综艺",
    id: 6,
  },
  {
    name: "搞笑",
    id: 7,
  },
]);

let list = ref([]);

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
let form = ref({
  page: 1,
  limit: 3,
  fenlei: "推荐",
});
//列表
const getlist = async () => {
  let res = await axios.post("http://localhost:3000/video_list", form.value);
  console.log(res.data.lengtha);
  list.value = res.data.video;
  lengtha.value = res.data.lengtha;
};

const huan = (item) => {
  router.push({
    path: "/video/video_detail",
    query: { id: item._id },
  });
};
onMounted(() => {
  getlist();
});

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    form.value.limit += 2;
    getlist();
    loading.value = false;

    if (list.value.length >= lengtha.value) {
      finished.value = true;
    }
  }, 1000);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
const dian = () => {
  router.push("/video/video_search");
};
const onClickTab = () => {
  console.log(active.value);
  console.log(aa.value[active.value].name);
  form.value.fenlei = aa.value[active.value].name;
  getlist();
};
</script>

<style scoped>
.video_a {
  width: 100px;
  height: 100px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky; /* 使元素变为粘性 */
  top: 0; /* 当滚动到距离顶部0px时开始固定 */
  z-index: 100; /* 确保导航栏在其他内容之上 */
  background-color: #fff;
}
.left {
  width: 90%;
}
.right {
  width: 10%;
  height: 10%;
}

.content {
  width: 100%;
  min-height: 700px;
  overflow: hidden;
  margin-bottom: 50px;
  background-color: rgb(237, 232, 232);
}
.van-cell {
  background-color: rgb(237, 232, 232);
}
.vadio {
  margin: 10px auto;
  width: 90%;
  height: 320px;
  border-radius: 10px;
  background-color: #fff;
  padding: 10px;
  .vadio-a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .vadio-a-a {
      padding: 5px 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
      }
      p {
        margin: 5px;
      }
    }
  }
  .vadio-b {
    padding: 10px 10px;
    text-align: left;
    color: black;
  }
  .vadio-c {
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .vadio_d {
    display: flex;
    justify-content: space-around;
    align-items: center;
    div {
      display: flex;
      justify-content: space-around;
      align-items: center;
      p {
        margin: 5px;
      }
    }
  }
}
</style>
